Top React Libraries — Animation, Sizes, and Markdown

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

React-Motion

The React-Motion package lets us animate content our way.

To install it, we can run:

npm i react-motion

Then we can use it by writing:

import React from "react";
import { Motion, spring } from "react-motion";

export default function App() {
  return (
    <div className="App">
      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(100) }}>
        {value => <div>{value.x}</div>}
      </Motion>
    </div>
  );
}

It comes with the Motion component to set the default style.

The x property is displayed by rendering value.x .

Then we use the spring function to animate the number going from 0 to 100.

There’re other kinds of motions that it supports.

For instance, we can use the StaggerMotion component to animate the stretching of 2 boxes:

import React from "react";
import { StaggeredMotion, spring } from "react-motion";

export default function App() {
  return (
    <div className="App">
      <StaggeredMotion
        defaultStyles={[{ h: 0 }, { h: 0 }]}
        styles={prevInterpolatedStyles =>
          prevInterpolatedStyles.map((_, i) => {
            return i === 0
              ? { h: spring(100) }
              : { h: spring(prevInterpolatedStyles[i - 1].h) };
          })
        }
      >
        {interpolatingStyles => (
          <div>
            {interpolatingStyles.map((style, i) => (
              <div key={i} style={{ border: "1px solid", height: style.h }} />
            ))}
          </div>
        )}
      </StaggeredMotion>
    </div>
  );
}

We use the StaggeredMotion component with the defaultStyles having the initial styles for the height.

Then in the styles prop, we have the code to animate the height changes with the spring function.

We animate height the prevInterpolatedStyles to change the height to the intermediate height.

Then in between the tags, we animate the box with the given height.

react-sizeme

The react-sizeme lets us get the size of elements.

To install it, we can run:

npm i react-sizeme

Then we can use it by writing:

import React from "react";
import { SizeMe } from "react-sizeme";

export default function App() {
  return (
    <div className="App">
      <SizeMe>{({ size }) => <div>width: {size.width}px</div>}</SizeMe>
    </div>
  );
}

The SizeMe component has the size of the div.

We get the value with size.width .

We can also use the withSize higher-order component to get the dimensions:

import React from "react";
import { withSize } from "react-sizeme";

function App({ size }) {
  return <div>My width is {size.width}px</div>;
}

export default withSize()(App);

react-markdown

The react-markdown lets us render markdown code in our React app.

To install it, we run:

npm i react-markdown

Then we can use it by writing:

import React from "react";
const ReactMarkdown = require("react-markdown");

const input = `# This is a header

And this is a paragraph

This is a [link]([http://example.com)`](http://example.com%29`);

export default function App() {
  return (
    <div className="App">
      <ReactMarkdown source={input} />
    </div>
  );
}

We have our markdown code in a string.

Then we pass that into the ReactMarkdown component as the value of the source prop to display it.

It can also parse HTML:

import React from "react";
const ReactMarkdown = require("react-markdown");

const input = `# This is a header

And this is a paragraph

<code>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia consectetur nunc. Morbi suscipit volutpat urna, in feugiat lorem convallis eget. Ut vel diam imperdiet, ultricies ligula et, tempor nibh. Donec congue turpis ex, in rhoncus sem feugiat eu. Donec condimentum volutpat ligula ac venenatis. Fusce lectus ligula, porttitor eu mollis ac, dictum vitae ligula. Pellentesque suscipit facilisis risus, finibus facilisis velit varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consequat justo in euismod volutpat. Cras blandit, nibh nec ornare tincidunt, libero metus tempor risus, non pulvinar nisl justo vitae arcu. Fusce sed mi et augue convallis volutpat et vitae turpis. Vestibulum efficitur ac est id ultrices. Quisque condimentum augue lectus, vulputate auctor ex ultrices sed. Vivamus facilisis est ac urna vestibulum eleifend.</code>`;

export default function App() {
  return (
    <div className="App">
      <ReactMarkdown source={input} escapeHtml={false} />
    </div>
  );
}

It’ll render all the text in the code tag and display them as code.

Conclusion

React-Motion lets us animate anything.

The react-sizeme package gets the size of elements.

react-markdown renders Markdown into HTML.